<template>
	<view>
		<view class="tip white f28">信息登记</view>
		<view v-if="detail.id" class="content p20 mt40">
			<view class="item mb40">
				<view class="f32">姓名</view>
				<input class="mt20" disabled :value="detail.name" />
			</view>
			<view class="item mb40">
				<view class="f32">联系电话</view>
				<input class="mt20" type="tel" disabled :value="detail.tel" />
			</view>
			<view class="item mb40">
				<view class="f32">身份证号</view>
				<input class="mt20" disabled :value="detail.card" />
			</view>
			<view class="item mb40">
				<view class="f32">性别</view>
				<radio-group class="d-s-c mt20">
					<label class="ww25 d-s-c f28" v-for="(item, index) in gender" :key="index">
						<radio :checked="index == gIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">籍贯</view>
				<input class="mt20" disabled :value="detail.marriage" />
			</view>
			<view class="item mb40">
				<view class="f32">婚姻情况</view>
				<radio-group class="d-s-c mt20">
					<label class="ww25 d-s-c f28" v-for="(item, index) in marr" :key="index">
						<radio :checked="index == mIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">健康情况</view>
				<radio-group class="d-s-c mt20">
					<label class="ww25 d-s-c f28" v-for="(item, index) in health" :key="index">
						<radio :checked="index == hIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">有无传染病或特殊疾病</view>
				<radio-group class="d-s-c mt20">
					<label class="ww25 d-s-c f28" v-for="(item, index) in disease" :key="index">
						<radio :value="index" :checked="index == dIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">学历</view>
				<radio-group class="d-s-c mt20">
					<label class="ww25 d-s-c f28" v-for="(item, index) in culture" :key="index">
						<radio :checked="index == cIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">工作状态</view>
				<radio-group class="d-s-c f-w mt20">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in work" :key="index">
						<radio :checked="index == wIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">技能专场（可多选）</view>
				<view class="d-s-c f-w mt20">
					<view class="f28 mb20 items tc" :class="item.check ? 'active' : ''" v-for="(item, index) in skill"
						:key="index" @click="setSkill(index)">{{ item.name }}</view>
				</view>
			</view>
			<view class="item mb40">
				<view class="f32">是否收戒</view>
				<radio-group class="d-s-c f-w mt20">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in harvest" :key="index">
						<radio :checked="index == haIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">义工经验</view>
				<radio-group class="d-s-c f-w mt20">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in service" :key="index">
						<radio :value="index" :checked="index == sIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">可服务时间</view>
				<radio-group class="d-s-c f-w mt20">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in time" :key="index">
						<radio :value="index" :checked="index == tIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">期望收获</view>
				<radio-group class="d-s-c f-w mt20">
					<label class=" ww100 d-s-c f28 mb20" v-for="(item, index) in gains" :key="index">
						<radio :value="index" :checked="index == gaIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<u-button v-if="detail.active==0||detail.active==1" text="已提交" shape="circle" color="#ccc"></u-button>
			<u-button v-if="detail.active==2||detail.active==3" text="已通过" shape="circle" color="#ccc"></u-button>
			<u-button v-if="detail.active==4" text="已拒绝" shape="circle" color="red"></u-button>
			<view class="mt40">
				<ayQrcode ref="qrcode" :modal="modal_qr" :url="id" @hideQrcode="hideQrcode" :height="300"
					:width="300" />
			</view>
		</view>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components: {
			ayQrcode,
		},
		data() {
			return {
				modal_qr: false,
				detail: {},
				id: 0,
				gender: ['男', '女'], //性别
				gIndex: 0, //性别下表
				marr: ['未婚', '已婚', '离异', '丧偶'], //婚姻情况
				mIndex: 0,
				health: ['健康', '一般'], //健康情况 
				hIndex: 0,
				disease: ['有', '无'], //有无传染疾病
				dIndex: 0,
				culture: ['在校生', '已毕业', '无'], //文化程度
				cIndex: 0, //文化程度下标
				work: ['在职', '高职/退休', '自由职业', '无业/待业'], //工作状态
				wIndex: 0,
				skill: [
					//技能专长
					{
						name: '厨艺料理',
						check: false
					},
					{
						name: '裁缝裁剪',
						check: false
					},
					{
						name: '医疗护理',
						check: false
					},
					{
						name: '茶道花艺',
						check: false
					},
					{
						name: '图书馆里',
						check: false
					},
					{
						name: '其他',
						check: false
					}
				],
				harvest: ['已皈依', '已受无戒', '已受披萨戒', '否'], //是否收戒
				haIndex: 0,
				service: ['有', '无'], //义工经验
				sIndex: 0,
				time: ['工作日', '周末', '随时'], //可服务时间
				tIndex: 0,
				gains: ['喜欢寺院的环境，身心清净净', '希望培植福根，祈望顺遂', '希望能够解决烦恼和困惑', '爱好公益，奉献精神，自利利他'], //期望收获
				gaIndex: 0
			}
		},
		onLoad({ id }) {
			this.id = id
			this.getDetail()

		},
		methods: {
			async getDetail() {
				const res = await this.$request({
					url: this.$api.recruitDetail,
					data: {
						id: this.id
					}
				})
				if (res.code == 1) {
					this.detail = res.data
					this.gIndex = this.gender.findIndex(item => item == res.data.gander)
					this.mIndex = this.marr.findIndex(item => item == res.data.educational)
					this.hIndex = this.health.findIndex(item => item == res.data.health)
					this.dIndex = this.disease.findIndex(item => item == res.data.disease)
					this.cIndex = this.culture.findIndex(item => item == res.data.educational)
					this.wIndex = this.work.findIndex(item => item == res.data.work)
					res.data.skill.split(',').map(item => this.skill.map(e => e.name == item ? e.check = true : null))
					this.haIndex = this.harvest.findIndex(item => item == res.data.exhort)
					this.tIndex = this.time.findIndex(item => item == res.data.time)
					this.gaIndex = this.gains.findIndex(item => item == res.data.expectation)
					this.showQrcode(); //一加载生成二维码
				}
			},
			showQrcode() {
				this.modal_qr = true;
				this.$nextTick(() => this.$refs.qrcode.crtQrCode())
			},

			//传入组件的方法
			hideQrcode() {
				this.modal_qr = false;
			},
		}
	};
</script>

<style scoped lang="scss">
	.items {
		background-color: #eeeeee;
		color: #777777;
		margin: 10rpx;
		padding: 10rpx 20rpx;
		width: calc(25% - 20rpx);
	}

	.active {
		background-color: #ff7e11;
		color: #fff;
	}

	.logo {
		height: 400rpx;
	}

	.tip {
		background-color: #ff7e11;
		padding: 20rpx 30rpx;
	}

	.content {
		line-height: 46rpx;
	}

	.item {

		input,
		picker,
		.picker {
			background-color: #f7f7f7;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.pickerView {
				height: 80rpx;
			}
		}
	}
</style>